<script src="../../../api/modules/api.js"></script>
<template>
  <div class="main" style="height: 100%">
    <div>
      <div class="topSearch">
        <span>
          店铺名称:
          <el-input
              size="small"
              prefix-icon="el-icon-search"
              style="width: 200px; margin-right: 10px"
              v-model="params.storeName"
              clearable
              placeholder="请输入店铺名称"
          ></el-input>
        </span>
        <!--        v-if="!isPurchaseList"-->
        <span>
          报销一级分类:
          <el-select
              clearable
              size="small"
              style="width: 200px"
              placeholder="请选择一级分类"
              v-model="params.financeId"
              @change="changeFinanceId"
          >
            <el-option
                v-for="(e, i) in oneType"
                :label="e.financeName"
                :key="i"
                :value="e.financeId"
            ></el-option>
          </el-select>
        </span>
        <span v-if="params.financeId && twoType.length">
          报销二级分类:
          <el-select
              clearable
              size="small"
              style="width: 200px"
              placeholder="请选择二级分类"
              v-model="params.financeLevelTypeId"
          >
            <el-option
                v-for="(e, i) in twoType"
                :label="e.levelName"
                :key="i"
                :value="e.id"
            ></el-option>
          </el-select>
        </span>
        <span>
          仓库:
          <el-select
              clearable
              size="small"
              style="width: 200px"
              placeholder="请选择仓库名称"
              v-model="params.areaId"
          >
            <el-option
                v-for="(e, i) in areaData"
                :label="e.areaName"
                :key="i"
                :value="e.area"
            ></el-option>
          </el-select>
        </span>
        <span>
          品牌:
          <el-select
              clearable
              size="small"
              style="width: 200px"
              placeholder="请选择品牌"
              v-model="params.systemType"
          >
            <el-option
                :value="item.id"
                :label="item.systemName"
                :key="item.id"
                v-for="item in systemList"
            ></el-option>
          </el-select>
        </span>
        <span>
          接收回款方式:
          <el-select
              clearable
              size="small"
              style="width: 200px"
              placeholder="接收回款方式"
              v-model="params.paymentMethod"
          >
            <el-option
                v-for="(e, i) in paymentMethodData"
                :label="e.name"
                :key="i"
                :value="e.value"
            ></el-option>
          </el-select>
        </span>
        <span>
          责任主体:
          <el-select
              clearable
              size="small"
              style="width: 200px"
              placeholder=" 责任主体"
              v-model="params.optioner"
          >
            <el-option
                v-for="(e, i) in responsibility"
                :label="e.optionerName"
                :key="i"
                :value="e.id"
            ></el-option>
          </el-select>
        </span>
        <!--        v-if="!isPurchaseList"-->
        <span>
          创建人:
          <el-select
              clearable
              size="small"
              style="width: 230px"
              filterable
              placeholder="请选择报销接收人"
              v-model="params.creator"
          >
            <el-option
                :label="item.userName"
                :value="item.userName"
                :key="item.id"
                v-for="item in receiveData"
            ></el-option>
          </el-select>
        </span>
        <span>
          <el-button size="small" type="primary" @click="searchList"
          >查询</el-button
          >
          <el-button size="small" type="primary" @click="addReimburse" v-if="authority.includes(1031)">
            新增报销
          </el-button>
          <el-button size="small" type="primary" v-if="authority.includes(1039)" @click="_addFinance"
          >财务报销
          </el-button>
          <el-button size="small" type="primary" v-if="authority.includes(1032)" @click="_addStore"
          >录入门店
          </el-button>
          <el-button
              :type="isPurchaseList ? 'success' : 'primary'"
              size="small"
              @click="changepurchaseList"
          >
    采购报销列表 ({{ isPurchaseList ? '开启' : '关闭' }})
  </el-button>
          <el-button
              :type="isRefund ? 'success' : 'primary'"
              size="small"
              @click="changeRefundList"
          >
    客户退款列表 ({{ isRefund ? '开启' : '关闭' }})
  </el-button>

           <el-button type="success" @click="_down" size="small" v-if="authority.includes(1059)">下载报表</el-button>
        </span>
      </div>
    </div>
    <div style="">
      <el-checkbox-group v-model="checkboxGroup1" size="small" style="float: right;margin-bottom: 2px"
                         @change="getStatus">
        <el-checkbox-button v-for="(e, i) in baoXiaoStatus" :label="e.value" :key="i">{{ e.name }}</el-checkbox-button>
      </el-checkbox-group>
      <!--      </div>-->
      <el-table
          :data="dataList"
          :height="maxHeight"
          @selection-change="handleSelectionChange"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          show-overflow-tooltip
          tripe
          border
          tooltip-effect="dark"
          :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }"
          :cellStyle="{
          textAlign: 'center',
          fontSize: '12px',
        }"
      >
        <el-table-column prop="id" label="序号" width="100px"></el-table-column>
        <el-table-column
            show-overflow-tooltip
            prop="storeCreateTime"
            label="到店时间"
        >
          <template v-slot:default="scope">
            {{ scope.row.storeCreateTime ? scope.row.storeCreateTime : "无" }}
          </template>
        </el-table-column>
        <el-table-column label="店铺名称" prop="storeName" min-width="200px">
        </el-table-column>
        <el-table-column
            prop="financeName"
            show-overflow-tooltip
            label="报销一级分类"
        >
        </el-table-column>
        <el-table-column
            prop="levelName"
            show-overflow-tooltip
            label="报销二级分类"
        >
        </el-table-column>
        <el-table-column
            prop="optionerName"
            show-overflow-tooltip
            label="责任主体"
        >
          <template slot-scope="scope">
            {{ scope.row.optionerName ? scope.row.optionerName : '无责任方' }}
          </template>
        </el-table-column>
        <el-table-column
            prop="reimburseTypeName"
            show-overflow-tooltip
            label="报销原因类型"
        >
          <template slot-scope="scope">
            {{ scope.row.reimburseTypeName ? scope.row.reimburseTypeName : '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="systemName" show-overflow-tooltip label="品牌">
        </el-table-column>
        <el-table-column prop="areaName" show-overflow-tooltip label="仓库">
          <template v-slot:default="scope">
            <span :style="{color: headerStyle(scope.row.areaId)}">{{ scope.row.areaName }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="reimburseRemark"
            show-overflow-tooltip
            label="报销原因说明"
        >
        </el-table-column>
        <el-table-column prop="money" show-overflow-tooltip label="报销金额">
        </el-table-column>
        <el-table-column
            show-overflow-tooltip
            prop="creator"
            label="创建人"
        >
          <template v-slot:default="scope">
            <span>{{ scope.row.creator ? scope.row.creator : "" }}</span>
          </template>

        </el-table-column>
        <el-table-column
            show-overflow-tooltip
            prop="createTime"
            label="创建时间"
        ></el-table-column>
        <el-table-column
            show-overflow-tooltip
            prop="operator"
            label="审核人"
        ></el-table-column>
        <el-table-column show-overflow-tooltip prop="status" label="状态">
          <template v-slot:default="scope">
            <span :style="{color: headerStyle(scope.row.status)}">{{ baoXiaoStatus[scope.row.status].name }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="paymentMethod"
            show-overflow-tooltip
            label="财务打款方式"
        >
          <template slot-scope="scope">
            {{
              scope.row.paymentMethod ? paymentMethodData[scope.row.paymentMethod - 1].name : (scope.row.paymentMethodName || '')
            }}
          </template>
        </el-table-column>
        <el-table-column
            type="selection"
            :selectable="isRowSelectable"
            width="55">
        </el-table-column>
        <el-table-column label="明细操作" width="180px" fixed="right">
          <template slot-scope="scope">
            <el-link
                type="info"
                @click="openDetail(scope.row, 1)"
                v-prevent-re-click
                v-if="authority.includes(1033)"
                style="margin-right: 10px"
            >详情
            </el-link>
            <!--  @click="review(scope.row)" -->
            <el-link
                type="primary"
                v-if="scope.row.status === 0&&authority.includes(1034)"
                @click="openDetail(scope.row, 2)"
                v-prevent-re-click
                style="margin-right: 10px"
            >财务审核
            </el-link>
            <el-link
                type="success"
                v-if="scope.row.status === 0&&authority.includes(1042)"
                @click="openDetail(scope.row, 3)"
                v-prevent-re-click
                style="margin-right: 10px"
            >审核打款
            </el-link>
            <el-link
                type="primary"
                v-if="scope.row.status === 3&&authority.includes(1041)"
                @click="_edit(scope.row)"
                v-prevent-re-click
                style="margin-right: 10px"
            >编辑
            </el-link>
            <el-link
                type="primary"
                v-if="scope.row.status === 5&&authority.includes(1038)&&(scope.row.financeId==4&&scope.row.levelName!='客户退款')"
                @click="openDetail(scope.row, 2)"
                v-prevent-re-click
                style="margin-right: 10px"
            >主管审核
            </el-link>
            <!--  @click="transferFunds(scope.row)" -->
            <el-link
                v-if="(scope.row.status === 0 || scope.row.status === 3)&&authority.includes(1035)"
                type="info"
                @click="cancelItem(scope.row)"
                v-prevent-re-click
                style="margin-right: 10px"
            >取消
            </el-link>
            <el-link
                v-if="scope.row.status !=4&&authority.includes(1036)"
                type="danger"
                @click="deteItme(scope.row)"
                v-prevent-re-click
            >删除
            </el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
          type="warning"
          size="small"
          v-if="authority.includes(1037)&&buttonShow"
          @click="openDkpzDeail"
          v-prevent-re-click
          style="float: right;margin-top: 10px"
      >批量打款￥{{ totalMoney }}
      </el-button>
      <el-button
          type="success"
          size="small"
          v-if="authority.includes(1037)&&buttonShow"
          @click="openAdiut"
          v-prevent-re-click
          style="float: right;margin: 10px 10px 0 0"
      >批量审核
      </el-button>
      <!--      <el-button-->
      <!--          type="primary"-->
      <!--          size="small"-->
      <!--          v-if="userName=='曹紫芳'||userName=='赵伟清'||userName=='聂聂'"-->
      <!--          @click="closeReimburse"-->
      <!--          v-prevent-re-click-->
      <!--          style="float: right;margin-top: 10px;margin-right: 15px"-->
      <!--      >关闭报销-->
      <!--      </el-button>-->
    </div>
    <div style="display: flex;justify-content: center">
      <el-pagination
          style="border-top: 1px solid #eee; padding-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNumber"
          :page-sizes="[20, 30, 50]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          align="right"
          :total="params.totalCount"
      >
      </el-pagination>
    </div>
    <add-reimburseNew
        ref="addDialog"
        @addStatus="receiveMessage"
    ></add-reimburseNew>
    <el-dialog
        :close-on-click-modal="false"
        :visible.sync="closeDialog"
        center
        title="选择日期"
        width="30%"
    >
      日期：
      <el-date-picker
          v-model="time"
          type="date"
          size="small"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 80%"
          placeholder="选择日期"
      >
      </el-date-picker>
      <span slot="footer">
        <el-button @click="closeDialog = false">取 消</el-button>
        <el-button type="primary" @click="comfirmClose">确定</el-button>
      </span>
      <span slot="footer" class="dialog-footer">
        <span style="display: block; color: red"
        >*确定后该日期前的订单不可再继续报销</span
        >
      </span>
    </el-dialog>
    <el-dialog :visible.sync="rejectDialog" title="审核" center width="30%">
      <p style="margin-bottom: 20px">
        <span>审核：</span>
        <el-radio-group v-model="siTongguo">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="3">不通过</el-radio>
        </el-radio-group>
      </p>
      <el-input
          v-if="siTongguo === 3"
          v-model="rejectReason"
          type="textarea"
          placeholder="请填写原因"
          size="small"
      ></el-input>

      <span slot="footer">
        <el-button
            size="small"
            @click="rejectDialog = false"
            style="margin-top: 10px; margin-left: 10px"
        >取消</el-button
        >
        <el-button type="danger" size="small" @click="directorAudit()"
        >确认
        </el-button>
      </span>
    </el-dialog>
    <div>
      <el-dialog
          :visible.sync="dialogAddStore"
          :close-on-click-modal="false"
          title="录入门店"
          top="10px"
          center
          height="calc(100vh - 350px)"
          style="overflow-y: auto"
          width="40%"
      >
        <div style="width: 100%;display: flex;align-items: center;flex-direction: column">
          <el-row>
            <el-col :span="24">
              <span style="width: 80px">店铺名称：</span>
              <el-input
                  size="small"
                  style="width: 280px"
                  v-model="storeObj.storeName"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span style="width: 80px">所属仓库：</span>
              <el-select
                  size="small"
                  style="width: 280px"
                  v-model="storeObj.areaId"
              >
                <el-option v-for="item in warehouseList" :key="item.area" :label="item.areaName" :value='item.area'/>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span style="width: 80px">发货时间：</span>
              <el-date-picker
                  v-model="storeObj.deliveryDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  size="small"
                  style="width: 280px"
                  placeholder="选择日期">
              </el-date-picker>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span style="width: 80px">订单类型：</span>
              <el-select
                  size="small"
                  style="width: 280px"
                  placeholder="请选择订单类型"
                  v-model.number="storeObj.systemType"
              >
                <el-option
                    v-for="(item, index) in systemList"
                    :key="index"
                    :label="item.systemName"
                    :value="item.id"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col
                :span="24"
                style="display: flex; flex-direction: row; align-items: center"
            >
              <span style="width: 80px">店铺地址：</span>
              <el-input
                  size="small"
                  style="width: 280px"
                  type="textarea"
                  v-model="storeObj.address"
              ></el-input>
            </el-col>
          </el-row>
        </div>
        <span slot="footer">
          <el-button @click="dialogAddStore = false">取 消</el-button>
          <el-button type="primary" @click="_submitStore">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--财务付款凭证-->
    <el-dialog
        :close-on-click-modal="false"
        width="30%"
        title='财务付款凭证'
        :visible.sync="dkVisible"
        append-to-body
    >
      <div
          class="flexBox"
          style="justify-content: flex-start; padding-left: 16px"
      >
        <div style="margin-bottom: 10px">
          付款码:
          <div class="div" style="display: flex; align-items: center;flex-wrap: wrap">
            <div
                v-for="(v, i) in dkObj.payUrlShowArray"
                style="display: flex; align-items: center; margin-right: 10px;"
            >
              <el-image
                  :key="i"
                  style="width: 50px; height: 50px"
                  ref="preview"
                  :src="host + v"
                  :preview-src-list="[host + v]"
              >
              </el-image>

            </div>
          </div>
        </div>
        <div>银行信息：<p v-for="a in cardInfo">{{ a.toString() }}</p></div>
        <span>付款方式：<el-select v-model="dkObj.paymentMethodId" style="width: 300px" size="small">
           <el-option
               v-for="(item, index) in payTypeList"
               :key="index"
               :label="item.name"
               :value="item.id"
           ></el-option>
        </el-select></span>
        <p style="margin-top: 10px">
          <span style="width: 99px">付款凭证：</span>
        </p>
        <div style="display: flex">
          <el-upload
              class="upload-demo"
              drag
              ref="uploadRef"
              :headers="headers"
              :action="`${$apiHost}/common/fileImgUrl`"
              :on-success="onSuccess"
              :show-file-list="false"
              multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <div v-if="qrCode" class="qrCode" style="display: flex;flex-direction: column;align-items: center">
            <el-image :src="qrCode" style="width: 150px;"></el-image>
            <el-button size="small" type="primary" style="margin-top: 10px" @click="recipePhonePic">接收手机端图片</el-button>
          </div>
        </div>

        <div class="div" style="display: flex; align-items: center">
          <div
              v-for="(v, i) in dkObj.paidUrl"
              style="display: flex; align-items: center; margin-right: 10px"
          >
            <el-image
                :key="i"
                style="width: 50px; height: 50px"
                ref="preview"
                :src="host + v"
                :preview-src-list="[host + v]"
            >
            </el-image>
            <div @click="deletePic(i)">
              <el-icon name="delete"></el-icon>
            </div>
          </div>
        </div>
        <span
            slot="footer"
            class="dialog-footer"
            style="display: flex; justify-content: center; margin-top: 20px"
        >
          <el-button @click="dkVisible = false">取 消</el-button>
          <el-button type="primary" @click="transferFunds">已付款   ¥{{ totalMoney }}</el-button>
        </span>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="closeDialog" center title="选择日期" width="30%">
      日期：
      <el-date-picker
          v-model="time"
          type="date"
          size="small"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 80%"
          placeholder="选择日期">
      </el-date-picker>
      <span slot="footer">
        <el-button @click="closeDialog = false">取 消</el-button>
                      <el-button type="primary" @click="comfirmClose">确定</el-button>
      </span>
      <span slot="footer" class="dialog-footer">
        <span style="display: block; color: red"
        >*确定后该日期前的订单不可再继续报销</span
        >
      </span>
    </el-dialog>
    <finance-pay ref="addFinanceRef"></finance-pay>
    <reimbursement-detail
        @addStatus="receiveDataTab"
        ref="detailRef"
    ></reimbursement-detail>
    <el-dialog :visible.sync="downDialog" width="30%" center title="导出报销报表" :close-on-click-modal="false">
      <div style="display: flex;align-items: center;flex-direction: column">
        <p style="margin-bottom: 15px">
          <!--          <span>选择日期：   <el-date-picker-->
          <!--              v-model="downObj.month"-->
          <!--              type="month"-->
          <!--              size="small"-->
          <!--              value-format="yyyy-MM"-->
          <!--              style="width: 250px"-->
          <!--              placeholder="选择月">-->
          <!--    </el-date-picker></span>-->
        </p>
        <p>
             <span>选择日期：   <el-date-picker
                 v-model="downObj.month"
                 type="month"
                 size="small"
                 value-format="yyyy-MM"
                 style="width: 250px"
                 placeholder="选择月">
    </el-date-picker></span>
        </p>
      </div>
      <span slot="footer">
         <el-progress
             v-if="loadingProgress"
             :percentage="progress"
             :status="progressStatus"
             :stroke-width="16"
             style="margin: 20px 0;"
             :show-text="true"
         ></el-progress>
        <el-button type="primary" @click="comfirmDown" size="small">下 载</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import upload from '@/RayComponents/upload.vue'
import axios from 'axios'
import addReimburseNew from './addReimburseNew.vue'
import quinn from '../../../utils/quinn'
import store from '../../../store'
import checkDetail from './checkDetail.vue'
import reimbursementDetail from './reimbursementDetail.vue'
import financePay from "./financePay.vue";

export default {
  name: 'reimbursementPeople',
  components: {
    upload,
    addReimburseNew,
    checkDetail,
    reimbursementDetail,
    financePay
  },
  data() {
    return {
      dkVisible: false,
      siTongguo: null,
      qrCode: "",
      loadingProgress: false,
      progress: 0,          // 进度百分比
      progressStatus: null,   // success / exception
      downDialog: false,
      receiveData: [], //报销接收人
      responsibility: [], //责任主体
      oneType: [],
      twoType: [],
      paymentMethodData: [
        {value: 1, name: '银行卡'},
        {value: 2, name: '微信'},
        {value: 3, name: '支付宝'},
      ],
      baoXiaoType: [
        {value: 1, name: '仓库漏捡、错捡'},
        {value: 2, name: '包装不牢固'},
        {value: 3, name: '安装问题'},
      ],
      baoXiaoStatus: [
        {value: 0, name: '财务待审核'},
        {value: 1, name: '财务待打款'},
        {value: 2, name: '已取消'},
        {value: 3, name: '审核不通过'},
        {value: 4, name: '已打款'},
        {value: 5, name: '待主管审批'},
      ],
      areaData: [],
      apiName: 'newAreaLedgerList',
      params: {
        pageNumber: 1,
        pageSize: 20,
        financeId: null,
        financeLevelTypeId: null,
        areaId: null,
        systemType: null,
        storeName: '',
        creator: "",
        statusList: [], //报销状态
        paymentMethod: null, //接受回款方式
        optioner: '', //责任主体
        reimburseRecipient: null, //报销接收人
      },
      payUrl: '',
      previewPayList: [],
      innerVisible: false,
      buttonShow: false,
      closeDialog: false,
      rejectDialog: false,
      loading: false,
      visible: false,
      innerTitle: '',
      cardNo: '',
      rejectId: {},
      paidUrl: [],
      cardName: '',
      userName: '',
      bankName: '',
      totalCount: 0,
      previewImg: [],
      host: this.$imgHost,
      previewImgList: [],
      systemList: [],
      chooseDateIndex: 1,
      dialogTitle: '',
      rejectReason: '',
      decimalCount: '',
      resFee: '',
      totalMoney: "",
      ledgerStatus: false,
      maxHeight: 0,
      typeOptions: [],
      payTypeList: [],
      typeList: [],
      createForm: {
        typeId: '',
        provinceId: '',
        voucher: '',
        price: '',
        remark: '',
      },
      orderId: '',
      time: '',
      provinceOptions: [],
      isPurchaseList: false,
      isRefund: false,
      dataList: [],
      authority: [],
      ids: [],
      userId: [],
      feeData: [],
      cardInfo: [],
      warehouseList: [],
      checkboxGroup1: [],
      arr: [],
      downObj: {},
      creatorList: [],
      storeObj: {
        storeName: '',
        areaId: '',
        systemType: null, //"系统订单类型   1 零食很忙订单 2 零食优选订单 3卡游 4冰杯订单 5派特 6唐饱饱 7零食很嗨 8动感生活
        address: '', //门店地址
        deliveryDate: '',//发货时间
      },
      dialogAddStore: false,
      dkObj: {
        paidUrl: [],
        ids: null,
        paymentMethodId: null,
        status: 4,
        payUrlShowArray: []
      },
    }
  },
  watch: {},

  computed: {
    preImgs() {
      return this.paidUrl.map((e) => `${this.$imgHost}${e}`)
    },
    headers() {
      const token = this.token || this.$quinn.getStorage('token')
      return {
        token,
      }
    },
  },
  created() {
    this.getPayType()
    const {authorityList = []} = quinn.getStorage("userData")
    this.authority = authorityList;
    this.$api.areaLedgerAreaList().then((res) => {
      this.areaData = res
    })
    this.$api.financeOneType().then((res) => {
      this.oneType = res
    })
    this.$api.areaLedgerAreaList().then(res => {
      this.warehouseList = res
    })
    this.$api.financeGetOptionerType().then((res) => {
      this.responsibility = res
    })
    // 报销接收人
    this.$api
        .getAccount({
          pageSize: 100000,
          pageNumber: 1,
        })
        .then((res) => {
          if (res && res.data) {
            this.receiveData = res.data
            // this.params.creator = res.data[0].userName
          }
        })
    this.getSystemType()
    document.addEventListener('paste', this.handlePaste)
    const {userName = [], id = []} = quinn.getStorage('userData') || {}
    this.userName = userName
    this.userId = id
  },
  mounted() {
    this.getCostType()
    this.getProvince()
    this.getList()
    this.$nextTick(() => {
      this.maxHeight = window.innerHeight - 280
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.maxHeight = window.innerHeight - 280
      })
    }
  },
  methods: {
    _down() {
      this.downDialog = true
      this.loadingProgress = false
      this.downObj = this.$options.data.call(this).downObj
    },
    comfirmDown() {
      if (!this.downObj.month) return this.$message.warning('请选择时间！')
      this.loadingProgress = true
      this.progress = 0
      this.progressStatus = null // 进度条状态
      let timer = null
      // 开始模拟进度递增
      timer = setInterval(() => {
        if (this.progress < 90) {
          this.progress += Math.floor(Math.random() * 5) + 1 // 每次递增 1~5%
        }
      }, 300)
      axios({
        url: `${this.$apiHost}/finance/getFinanceDataReimburseMonthSummaryExcel`,
        method: 'get',
        responseType: 'blob',
        headers: {
          token: window.$quinn.getStorage("token")
        },
        params: this.downObj
      }).then(res => {
        this.progress = 100
        this.progressStatus = 'success'
        clearInterval(timer)
        this.loadingProgress = false
        const disposition = res.headers['content-disposition'];
        let fileName = '报销报表.xlsx'; // 默认给个 .xlsx
        if (disposition) {
          const match = disposition.match(/filename="?([^"]+)"?/);
          if (match) {
            fileName = decodeURIComponent(match[1]);
            // 如果没有后缀，就补 .xlsx
            if (!fileName.includes('.')) {
              fileName += '.xlsx';
            }
          }
        }
        const blob = new Blob([res.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        URL.revokeObjectURL(link.href);
        // 接口返回后，立即让进度条完成
      });
    },
    openAdiut() {
      this.$confirm(`确认批量审核${this.ids}通过？`, '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--success',
        cancelButtonClass: 'el-button--danger',
      })
          .then(() => {
            const data = {
              status: 1,
              ids: this.ids,
            }
            this.$api.financeUpdateFinanceDataReimburseStatus(data).then((res) => {
              if (res == 1) {
                this.$message({message: '操作成功!', type: 'success'})
                this.getList()
              }
            })
          })
          .catch((action) => {
          });
    },
    recipePhonePic() {
      this.$api.accountGetUserUploadImgUrl().then(res => {
        if (res) {
          console.log(res.split(','))
          this.dkObj.paidUrl.push(...res.split(','))
        } else {
          this.$message.warning('暂无图片！')
        }
      })
    },
    _addFinance() {
      this.$refs.addFinanceRef.handleOpen()
    },
    _edit(val) {
      this.$refs.addDialog.handleOpen(val)
    },
    async getPayType() {
      const res = await this.$api.orderGetPaymentMethod()
      if (res && res.length) {
        this.payTypeList = []
        this.payTypeList = res
      }
    },
    changeFinanceId(e) {
      this.params.financeLevelTypeId = null
      this.twoType = []
      if (e) {

        this.$api
            .financeGetFinanceLevelTypeByFid({financeId: e})
            .then((res) => {
              this.twoType = res
            })
      }
    },
    handleSelectionChange(e) {
      if (!e.length) {
        this.dkObj.payUrlShowArray = []
        this.cardInfo = []
      } else {
        this.dkObj.payUrlShowArray = []
        this.cardInfo = []
        this.dkObj.payUrlShowArray = Array.from(
            new Set(
                e.filter(item => item.payUrl)      // 只要有 payUrl 的项
                    .map(item => item.payUrl)         // 提取 payUrl
            )
        )
      }
      this.cardInfo = Array.from(
          new Map(
              e.map(item => [item.cardNo + '_' + item.cardName, [item.cardNo, item.cardName, item.bankName]])
          ).values()
      )
      console.log(this.cardInfo)
      const total = e.reduce((sum, item) => sum + item.money, 0)
      this.totalMoney = total
      if (e.toString()) {
        this.buttonShow = true
      } else {
        this.buttonShow = false
      }
      this.ids = e.map(el => el.id)
    },
    getStatus(val) {
      this.params.pageNumber = 1
      this.params.statusList = val
      this.purchaseList()
    },
    isRowSelectable(row) {
      return row.status == 1 || row.status == 0;
    },
    changepurchaseList() {
      this.isRefund = false
      this.isPurchaseList = !this.isPurchaseList
      this.purchaseList()
    },
    changeRefundList() {
      this.isPurchaseList = false
      this.isRefund = !this.isRefund
      this.purchaseList()
    },
    purchaseList() {
      if (this.isPurchaseList) {
        this.$api.financeGetFinanceDataReimburseZhaoFengJiaoList(this.params).then(res => {
          this.dataList = res.data
          this.params.totalCount = res.total
        })
      } else if (this.isRefund) {
        this.$api.financeGetFinanceDataReimburseCaiWuList(this.params).then(res => {
          this.dataList = res.data
          this.params.totalCount = res.total
        })
      } else {
        this.getList()
      }
    },
    headerStyle(val) {
      const colorMap = {
        43: '#409EFF',
        44: '#121552',
        45: '#67C23A',
        52: '#E6A23C',
        53: '#F56C6C',
        56: '#2E8B57',
        58: '#9A7DFF',
        0: '#67C23A',
        1: '#121552',
        2: '#E6A23C',
        3: '#F56C6C',
        4: '#FF0000',
        5: '#9A7DFF',
      }
      const bg = colorMap[String(val)] || '#66b1ff'
      return bg
    },
    onSuccess(res) {
      if (res.code === 200 && res.result) {
        this.dkObj.paidUrl.push(res.result[0])
      }
    },
    deletePic(i) {
      this.dkObj.paidUrl.splice(i, 1)
    },
    receiveDataTab(val) {
      if (val == 1)
          // this.getList()
        this.purchaseList()
    },
    openDetail(row, type) {
      this.$refs.detailRef.handleOpen(row, type)
    },
    async _submitStore() {
      try {
        if (!this.storeObj.storeName) {
          return this.$message.warning('请输入门店名称！')
        }
        if (!this.storeObj.systemType) {
          return this.$message.warning('请选择订单类型！')
        }
        if (!this.storeObj.address) {
          return this.$message.warning('请输入门店地址！')
        }
        if (!this.storeObj.deliveryDate) {
          return this.$message.warning('请选择发货日期！')
        }
        this.$api.orderInsertStoreInfo(this.storeObj).then((res) => {
          if (res == 1) {
            this.$message.success(`新增成功！`)
            this.dialogAddStore = false
            this.getData()
          }
        })
      } catch {
        this.$message.error('操作失败，请稍后重试')
      }
    },
    _addStore() {
      this.storeObj.storeName = ''
      this.storeObj.address = ''
      this.storeObj.areaId = ''
      this.storeObj.deliveryDate = ''
      this.storeObj.systemType = null
      this.dialogAddStore = true
    },
    cancelItem(row) {
      this.$confirm('确认要取消吗？')
          .then((_) => {
            // this.$api.orderUpdatePayStatus(data).then()
            this.$api
                .financeUpdateFinanceDataReimburseStatus({ids: [row.id], status: 2})
                .then((res) => {
                  if (res == 1) {
                    this.$message({message: '操作成功!', type: 'success'})
                    this.getList()
                  }
                })
          })
          .catch((_) => {
            return
          })
    },
    openDkpzDeail() {
      this.dkObj.paidUrl = []
      this.dkObj.ids = null
      this.dkObj.paymentMethodId = null
      this.dkVisible = true
      this.$api.wxUserUploadImg({userId: this.userId}).then(res => {
        this.qrCode = 'data:image/png;base64,' + res
      })
    },
    transferFunds() {
      if (!this.dkObj.paidUrl) {
        return this.$message.warning('请上传打款凭证！')
      }
      const data = {
        paidUrl: this.dkObj.paidUrl.join(','),
        ids: this.ids,
        status: 4,
        paymentMethodId: this.dkObj.paymentMethodId
      }
      this.$api
          .financeUpdateFinanceDataReimburseStatus(data)
          .then((res) => {
            if (res == 1) {
              this.$message({message: '操作成功!', type: 'success'})
              this.dkVisible = false
              // this.getList()
              this.purchaseList()
            }
          })
    },
    review(val) {
      this.rejectId = val.id
      this.rejectReason = ''
      this.siTongguo = null
      this.rejectDialog = true
    },
    deteItme(val) {
      this.$confirm('确认要删除吗？')
          .then((_) => {
            this.$api
                .financeDeleteFinanceDataReimburse({ids: [val.id]})
                .then((res) => {
                  if (res) {
                    this.$message.success('操作成功！')
                    this.getList()
                  }
                })
          })
          .catch((_) => {
            return
          })
    },
    checkDetail(val) {
      this.$refs.checkDetailRef.handleOpen(val)
    },
    getSystemType() {
      this.$api.orderGetSystemTypeVo().then((res) => {
        this.systemList = res
      })
    },
    reject(row) {
      // this.rejectDialog = true
      // this.rejectReason = ''
      // this.rejectId = row
    },
    receiveMessage(val) {
      if (val == 1) {
        // this.getList()
        this.purchaseList()
      }
      if (val == 2) {
        this.$api
            .storeLedgerGetFinanceOneLevelTypeDto({orderId: this.orderId})
            .then((res) => {
              this.typeList = res
            })
        // this.getList()
        this.purchaseList()
      }
    },
    addReimburse() {
      this.$refs.addDialog.handleOpen()
    },
    closeReimburse() {
      this.closeDialog = true
      this.time = ''
    },
    comfirmClose() {
      this.$api
          .orderCloseOrderReimbursement({closeTime: this.time})
          .then((res) => {
            if (res == 1) {
              this.closeDialog = false
              this.$message.success('操作成功！')
              // this.getList()
              this.purchaseList()
            }
          })
    },
    handlePaste(event) {
      if (!this.dkVisible) return
      const clipboardData = event.clipboardData || window.clipboardData
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i]
          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile()
            if (file) {
              this.uploadImage(file)
            }
          } else {
            this.$message.error('请拷贝图片!')
            break
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData()
      formData.append('file', imageFile)
      axios
          .post(`${this.$apiHost}/common/fileImgUrl`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              token: store.state.token,
            },
          })
          .then((response) => {
            this.dkObj.paidUrl.push(response.data.result[0])
            // this.preSalesImgList.push('https://' + response.data.result[0]);
          })
          .catch((error) => {
          })
    },
    searchList() {
      this.params.pageNumber = 1
      // this.getList()
      this.purchaseList()
    },
    getList() {
      this.loading = true
      this.$api.financeGetFinanceDataReimburseList(this.params).then((res) => {
        this.dataList = res.data
        this.params.totalCount = res.total
        this.loading = false
      })
    },
    getProvince() {
      this.$api.areaLedgerAreaList().then((res) => {
        this.provinceOptions = res
      })
    },
    getCostType() {
      this.$api.areaLedgerFyTypeList().then((res) => {
        this.typeOptions = res
      })
    },
    handleSizeChange(e) {
      this.params.pageSize = e
      // this.getList()
      this.purchaseList()
    },
    handleCurrentChange(e) {
      this.params.pageNumber = e
      // this.getList()
      this.purchaseList()
    },
    handleClose() {
    },
    comfirmAudit(val, type) {
      const data = {
        status: 1,
        id: val.id,
        rejectReason: this.rejectReason,
      }
      if (type == 3) {
        data.status = 0
        delete data.rejectReason
      }
      this.$api.storeLedgerUpdateStoreLedgerFinanceStatus(data).then((res) => {
        if (res == 1) {
          this.$message({message: '操作成功!', type: 'success'})
          this.$api
              .storeLedgerGetFinanceOneLevelTypeDto({orderId: this.orderId})
              .then((res) => {
                this.typeList = res
              })
          this.chooseType(this.chooseDateIndex)
          this.rejectDialog = false
          this.getList()
        }
      })
    },
    directorAudit(val, type) {
      if (!this.siTongguo) {
        return this.$message.warning('请选择是否通过!')
      }
      if (this.siTongguo === 3 && !this.rejectReason) {
        return this.$message.warning('请输入原因!')
      }
      const data = {
        status: this.siTongguo,
        rejectReason: this.siTongguo === 3 ? this.rejectReason : '',
        ids: [this.rejectId],
      }
      this.$api.financeUpdateFinanceDataReimburseStatus(data).then((res) => {
        if (res == 1) {
          this.$message({message: '操作成功!', type: 'success'})
          this.rejectDialog = false
          // this.getList()
          this.purchaseList()
        }
      })
    },
    //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线 //分割线
  },
}
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;

  span {
    display: inline-block;
    width: 90px;
  }
}

.topSearch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  span {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 5px;
  }
}

.amountContainer {
  width: 100%;
  text-align: center;
}

.amountContainer > div:nth-child(1) {
  margin-bottom: 10px;
}

/deep/ .el-dialog__header {
  background-color: #0f79e2;
  //border-top-left-radius: 20px;
  //border-top-right-radius: 20px;
}

/deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .center {
  border-radius: 20px;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.feeType {
  display: flex;
  justify-content: center;
}

.typeList {
  width: 150px;
  height: 60px;
  color: #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  background: linear-gradient(to left, #b3d8ff, #b3d8ff) left top no-repeat,
  linear-gradient(to bottom, #b3d8ff, #b3d8ff) left top no-repeat,
  linear-gradient(to left, #b3d8ff, #b3d8ff) right top no-repeat,
  linear-gradient(to bottom, #b3d8ff, #b3d8ff) right top no-repeat,
  linear-gradient(to left, #b3d8ff, #b3d8ff) left bottom no-repeat,
  linear-gradient(to bottom, #b3d8ff, #b3d8ff) left bottom no-repeat,
  linear-gradient(to left, #b3d8ff, #b3d8ff) right bottom no-repeat,
  linear-gradient(to left, #b3d8ff, #b3d8ff) right bottom no-repeat;
  background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;

  span {
    cursor: default;
  }
}

.active {
  box-shadow: inset 0 0 16px 0 #66b1ff;
  font-size: 16px;
  font-weight: bolder;
}
</style>
